<!DOCTYPE html>
<html>
<head>
    <style>
        .video-container {
            position: relative;
            width: 640px;
            height: 360px;
            margin: 20px auto;
        }

        .video-container video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: contain;
            transition: opacity 0.3s;
            opacity: 1;
        }

        .video-container video[style*="display: none"] {
            opacity: 0;
        }
    </style>
</head>
<body>
<div class="video-container">
    <video id="forwardVideo" muted playsinline></video>
    <video id="reversedVideo" muted playsinline style="display: none;"></video>
</div>

<!-- 视频选择 -->
<label for="forwardFile">选择正序视频:</label>
<input type="file" id="forwardFile" accept="video/*"><br><br>
<label for="reversedFile">选择倒序视频:</label>
<input type="file" id="reversedFile" accept="video/*"><br><br>

<script>
    const forwardVideo = document.getElementById('forwardVideo');
    const reversedVideo = document.getElementById('reversedVideo');
    const forwardFileInput = document.getElementById('forwardFile');
    const reversedFileInput = document.getElementById('reversedFile');

    // 当选择文件时更新视频源
    forwardFileInput.addEventListener('change', (e) => {
        const file = e.target.files[0];
        if (!file) return;

        const url = URL.createObjectURL(file);
        forwardVideo.src = url;
        forwardVideo.load();
    });

    reversedFileInput.addEventListener('change', (e) => {
        const file = e.target.files[0];
        if (!file) return;

        const url = URL.createObjectURL(file);
        reversedVideo.src = url;
        reversedVideo.load();
    });

    // 其余逻辑保持不变...
    forwardVideo.preload = 'auto';
    reversedVideo.preload = 'auto';

    forwardVideo.addEventListener('loadeddata', () => {
        forwardVideo.style.display = 'block';
        forwardVideo.play();
    });

    forwardVideo.addEventListener('ended', () => {
        forwardVideo.style.display = 'none';
        reversedVideo.style.display = 'block';
        reversedVideo.play();
    });

    reversedVideo.addEventListener('ended', () => {
        reversedVideo.style.display = 'none';
        forwardVideo.style.display = 'block';
        forwardVideo.play();
    });

    document.addEventListener('visibilitychange', () => {
        if (!document.hidden) {
            if (forwardVideo.style.display === 'block' && forwardVideo.paused) {
                forwardVideo.play();
            }
            if (reversedVideo.style.display === 'block' && reversedVideo.paused) {
                reversedVideo.play();
            }
        }
    });
</script>
</body>
</html>